//屏幕比例
$scale : 0.714285;
//主题默认前景色
$font-default-color:#f73352;
//主题默认主色调
$theme-default-color:#f73352;
//主题主色调全局hover颜色
$theme-default-hover-color:#e31f3e;
//内页layout padding
$content-default-padding:0px * $scale;
//外部主框架相对body padding值
$layout-default-padding:57px * $scale;
//屏幕最小宽度
$layout-min-width:1200px;
//屏幕最大宽度
$layout-max-width:1600px;
//表格头部背景
$table-header-bg : url("../images/table_th_bg.jpg");
//表格头部颜色
$table-header-bg-color:#e1e9f4;
//表格外部边框色
$table-border-color:#eee;
//表格td边框色
$td-border-color:#eee;
//表格默认最小列宽
$table-column-min-width:100px;
//输入框边框色
$theme-input-border-color:#c1c1c1;
//输入框内阴影颜色
$theme-input-shadow:rgba(165,165,165,.3);
//表单元素字体颜色
$theme-form-default-color:#818181;
//表格内部链接文字默认色
$table-inset-font-color:$theme-default-color;
/*panel背景颜色*/
$theme-panel-bg-color:#fafafa;
/*panel默认边框色*/
$theme-panel-border-color:#c9c9c9;

/*初始化一系列样式(图片，warning，error，danger，normal，button)*/
.warning{
  color: #ff731f;
  font-weight: bold;
}
.price{
  color: $font-default-color;
}
.danger{
  color: red;
}
.normal{
  color: #535353;
}
.green{
  color:#00c36a;
}
/*
 *圆角mixins
 *params radius deg
 */
@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
@mixin element-transition(){
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}
@mixin box-shadow($x,$y,$size,$color,$inset){
  -webkit-box-shadow:$x $y $size $color $inset;
  -moz-box-shadow:$x $y $size $color $inset;
  -o-box-shadow:$x $y $size $color $inset;
  -ms-box-shadow:$x $y $size $color $inset;
  box-shadow:$x $y $size $color $inset;
}
@mixin box-shadow-outset($x,$y,$size,$area,$color){
  -webkit-box-shadow:$x $y $size $area $color;
  -moz-box-shadow:$x $y $size $area $color;
  -o-box-shadow:$x $y $size $area $color;
  -ms-box-shadow:$x $y $size $area $color;
  box-shadow:$x $y $size $area $color;
}
@mixin box-sizing(){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

$nav-width: 284px * $scale;
body{
  background-color: #f5f5f5;
  padding-bottom: 40px;
}

.app-layout{
  min-width: $layout-min-width;
  margin: 0 auto;
  background-color: #f5f5f5;
}
//按钮样式
.button{
  width: 160px * $scale;
  min-width: 160px * $scale;
  color: #818181;
  border: 1px solid #c1c1c1;
  display: inline-block;
  *display: inline;
  padding: 10px * $scale 20px * $scale;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 16px * $scale;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
;*zoom:1;
  @include border-radius(5px);
  &.small{
    min-width: 120px * $scale;
    width: 120px * $scale;
    padding: 6px * $scale 0 5px * $scale 0;
  }
  &.min{
    min-width: 45px;
    width: 45px;
    padding: 5px 0;
  }
  &:hover{
    color: $font-default-color;
    border-color: $font-default-color;
  }
}
.button.primary{
  background-color: $theme-default-color;
  border-color: $theme-default-color;
  color: #fff;
  &:hover{
    background-color:$theme-default-hover-color;
    border-color: $theme-default-hover-color;
  }
}
.button.export{
  background-color: #59a5eb;
  color: #fff;
  border-color:#59a5eb;
  &:hover{
    background-color: #2e89de;
    border-color: #2e89de;
  }
}
.button[disabled]{
  color: #dadada;
  border-color: #e6e6e6;
  background-color:#fff;
  &:hover{
    color: #dadada;
    border-color: #e6e6e6;
    background-color:#fff;
    cursor: not-allowed;
  }
}

//标题样式
.page-header{
  font-size:30px * $scale;
  color: #000;
  font-weight: bold;
  padding: 0 0 10px 0;
}
input[type="text"],input[type="password"],textarea{
  background-color: #fff;
  color: $theme-form-default-color;
  width: 280px * $scale;
  padding:10px * $scale 0 10px * $scale 10px;
  border: 1px solid $theme-input-border-color;
  vertical-align: middle;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  @include border-radius(5px);
}
input[type="text"].large,input[type="password"].large,textarea.large{
  width: 450px * $scale;
}
input[type="text"].small,input[type="password"].small,textarea.small{
  width: 200px * $scale;
}
input[type="text"].min,input[type="password"].min,textarea.min{
  width: 115px * $scale;
}

/*清除ie9+的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
select{
  color: $theme-form-default-color;
  width: 280px * $scale;
  height:45px * $scale;
  line-height: 45px * $scale;
  padding: 0 30px 0 10px;
  padding: 6px 6px 6px 1px\9;
  height:auto\0;
  border: 1px solid $theme-input-border-color;
  background-color: #fff;
  vertical-align: middle;
  @include border-radius(5px);
  -webkit-appearance: none;
  -moz-appearance:none;
  appearance: none;
  position: relative;
  background-image:url("../images/caret-down.png");
  background-repeat: no-repeat;
  background-position: 96% center;
  background-image:none\0;

}
select.small{
  width:150px * $scale;
}
select.min{
  width: 70px * $scale;
  padding-right: 20px;
  padding-right: 6px\0;
  background-position: 80% center;
}
select.large{
  width: 450px * $scale;
}
textarea{
  min-height: 100px * $scale;
  height: 100px * $scale;
}

/*顶部工具栏 tool-bar*/
.tool-bar{
  background-color: #fff;
  padding:11px 0 10px 0;
  border-bottom: 1px solid #dfdfdf;
  ul.welcome{
    padding-right: $layout-default-padding;
    li{
      float: left;
      padding: 0 16px;
      border-left: 1px solid #bfbfbf;
      &:first-child{
        border:none
      }
      a{
        font-size: 12px;
        color: #797979;
        .icon-down{
          font-size: 12px;
          padding: 0 3px;
          color:#797979;
        }
      }
    }
  }
  p{
    font-size:12px;
    color: #797979;
    padding-left: $layout-default-padding;
    position: relative;
    top: 2px;
    span{
      margin: 0 10px;
    }
    a{
      color:#797979;
    }
  }
}
/*nav-tabs*/
.nav-tabs{
  background-color: #fbfbfb;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  li{
    float: left;
    padding: 25px * $scale 0;
    width: 120px * $scale;
    border-bottom:2px solid transparent;
    position: relative;
    a{
      display: block;
      text-align: center;
      color: #6f6f6f;
      font-size: 18px * $scale;
      border-left: 1px solid #bfbfbf;
    }
    &.active:after{
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      bottom: -3px;
      background-color: $theme-default-color;
    }
    &.active{
      a{
        color: $theme-default-color;
      }
    }
    &:first-child{
      a{
        border-left: none;
      }
    }
  }
}
/*panel-content*/
.panel-content{
  background-color: #fff;
  .panel{
    background-color: $theme-panel-bg-color;
    border-top: 1px solid $theme-panel-border-color;
    border-bottom: 1px solid $theme-panel-border-color;
    margin-bottom: 20px;
    .panel-header{
      padding: 20px * $scale 20px * $scale 20px * $scale 30px * $scale;
      font-size:20px * $scale;
      color: #373737;
      font-size: 14px;
      border-bottom: 1px solid $theme-panel-border-color;
      background-color: #f3f3f3;
      .status{
        padding: 2px 5px;
        @include border-radius(3px);
        font-weight: normal;
        font-size: 12px;
        vertical-align: middle;
      }
    }
    .panel-body{
      background-color: #fff;
    }
  }
}
/*顶部header*/
.header {
  padding: 0 $layout-default-padding;
  .logo {
    padding: 50px * $scale 0;
    a {
      width: 175px * $scale;
      height: 72px * $scale;
      display: inline-block;
      img {
        width: 175px * $scale;
        vertical-align: middle;
      }
    }
    .sys-name {
      display: inline-block;
      color: $theme-default-color;
      font-size: 28px * $scale;
      font-weight: bold;
      color: #db0000;
      padding: 2px 0 2px 14px;
      margin-left: 25px * $scale;
      border-left: 1px solid $theme-default-color;
    }
  }
  .header-menu {
    background-color:$theme-default-color;
    ul li{
      float:left;
      position: relative;
      a{
        display: block;
        padding: 25px * $scale 30px * $scale;
        font-size: 24px * $scale;
        font-weight: bold;
        color: #fff;
        &.active:after{
          content: "\e658";
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
          font-family: "iconfont" !important;
          font-style: normal;
          font-size: 12px;
          color: #fff;
          position: absolute;
          left: 50%;
          bottom: -3px;
          margin-left: -6px;
        }
        &.active{
          background-color: $theme-default-hover-color;
        }
        &:hover{
          background-color: $theme-default-hover-color;
        }
      }
    }
  }
}

/** container layout*/
.container{
  padding:0 $layout-default-padding;
  margin: 36px * $scale 0 0 0;
}
/**aside-left menu*/
.nav {
  position: relative;
  float: left;
  width: $nav-width - 2;
  background-color: #303842;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  @include border-radius(10px);
  @include box-shadow-outset(0,2px,10px,0,rgba(102,102,102,.2));
  .menu-headers {
    padding: 22px * $scale 0 22px * $scale 22px * $scale;
    background-color: #202731;
    font-size: 22px * $scale;
    font-weight: bold;
    color: #d5d7d9;
    border-bottom: 1px solid #3c444d;
    background-color: #f6f6f6;
    font-size: 22px * $scale;
    font-weight: bold;
    color: #2c2c2c;
    border-bottom: 1px solid #e6e6e6;
  }
  .menu-list {
    padding: 0 15px * $scale 0 15px * $scale;
    .menu-item {
      padding: 15px * $scale 0;
      border-top: 1px solid #ebebeb;
      &:first-child {
        border: none;
      }
      .title {
        font-size: 22px * $scale;
        color: #d5d7d9;
        color: #2c2c2c;
        span {
          font-weight: bold;
        }
        .iconfont {
          font-size: 20px;
          color: $theme-default-color;
          margin-right: 10px;
          font-weight: normal;
        }
        .icon-down {
          position: relative;
          top: 5px;
          font-size: 12px;
          color: $theme-default-color;
          margin: 0;
        }
      }
      .child {
        padding: 5px 0 0 0;
        a {
          padding: 10px 12px;
          font-size: 18px * $scale;
          color: #2c2c2c;
          display: block;
          float: left;
          width: 90px * $scale;
          white-space:nowrap;
          &.active {
            color: $theme-default-color;
          }
        }
      }
    }
  }
}
.footer{
  padding: 20px 0;
  .footer-nav{
    margin: 0 auto;
    width: 790px;
    padding: 20px 0;
    li{
      float: left;
      border-left: 1px solid #cbcbcb;
      padding: 0 20px;
      a{
        display: block;
        font-size: 14px;
        color: #5c5c5c;
      }
      &:first-child{
        border: none;
      }
    }
  }
  .copy-right{
    text-align: center;
    font-size: 14px;
    color: #8d8d8d;
  }
}
.content{
  box-sizing: border-box;
  margin-left: $nav-width + 20px;
}
.workspace-layout {
  background-color: #fff;
  border: 1px solid #c9c9c9;
  @include border-radius(5px);
  min-height: 500px;
  padding: $content-default-padding;
  overflow: hidden;
}
.workspace-layout.none{
  border: none;
  background-color: transparent;
}
.route-nav {
  background-color: #f8f8f8;
  padding:13px 0 14px 27px * $scale;
  border: 1px solid #e6e6e6;
  margin-bottom: 16px * $scale;
  @include border-radius(5px);
  overflow: hidden;
  ul{
    li{
      float: left;
      padding-right:10px;
      a{
        padding-right: 10px;
        font-size: 14px;
        color: #2c2c2c;
        &.active{
          color: $theme-default-color;
        }
      }
    }
  }
}


.btn {
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.btn-select {
  @extend .btn;
  background-color: red;
  color: #fff;
}

.help-center-nav{
  position: relative;
  float: left;
  width:280px * $scale;
  text-align: center;
  font-size: 16px;
  border: 1px solid #EEE;
  .menu-title,.menu-item{
    height: 60px* $scale;
    line-height: 60px * $scale;
    a{
      display: block;
      color: #000;
      border-bottom: 1px solid #E3E3E3
    }
  }
  .menu-title{
    i{
      margin: 0 10px 0 -30px;
      font-size: 20px;
      font-weight: normal;
      color: $font-default-color;
    }
  }
  .menu-item{
    position: relative;
    a{color: #656565;}
    a:hover{
      color:$font-default-color;
    }
    &:last-child{
      a{border-bottom: none}
    }
  }
  .menu-item.active{
    &:before{
      content: "";
      width: 3px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: $font-default-color;
    }
    a{
      color:$font-default-color;
    }
  }
  .menu-title{
    font-weight: bold;
    background: #fff;
  }
  .menu-item{
    padding:  0 10px;
  }
}